<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/codefort.css}"/>
</head>
<body>
<div class="logo">
    <h1>Code Fort WebConsole</h1>
</div>
<div class="box">
    <div class="left"></div>
    <div class="right">
        <h2></h2>
        <h2></h2>
        <h4>登录</h4>
        <h2></h2>
        <h2></h2>
        <h2></h2>
        <form id="login-form" th:action="@{/doLogin}" method="post">
            <input class="acc" name="username" type="text" placeholder="用户名">
            <input class="acc" name="password" type="password" placeholder="密码">
            <button type="button" class="show-password" onclick="showPassword()">显示密码</button>
            <input class="submit" type="submit" value="登录">
        </form>
    </div>
</div>

<script>
    function showPassword() {
        var passwordInput = document.querySelector('input[name="password"]');
        var showButton = document.querySelector('button[class="show-password"]');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            showButton.textContent = '隐藏密码';
        } else {
            passwordInput.type = 'password';
            showButton.textContent = '显示密码';
        }
    }
</script>

</body>
</html>